<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>所有角色权限一览</title>

    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{lib/css/main.css}">
    <link rel="stylesheet" th:href="@{/lib/css/public_permission.css}">

    <script th:src="@{/lib/js/jquery-3.4.1.min.js}"></script>
    <script th:src="@{/layui/layui.js}"></script>



</head>

<style>
    body{
        background-image: url("images/background/page_bg.JPG");
        background-size: 100%;

    }
</style>

<script>
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function(){
        var element = layui.element;

        //…
    });
    $(function () {

        //编辑
        edituser = function (data) {
            layui.use('layer', function () {
                var layer = layui.layer;

                layer.open({

                    title: ['用户信息'],
                    type: 2,
                    content: 'page/user/edituser.html',
                    shadeClose: true,
                    area: ['550px', '650px'],
                    success: function (layero, index) {
                        console.log(data);
                        var body = layui.layer.getChildFrame('body', index);
                        body.find(".username").val(data.username);
                        body.find(".password").val(data.password);
                        body.find(".email").val(data.email);
                        body.find(".birthday").val(data.birthday);
                        body.find(".activeCode").val(data.activeCode);
                        body.find(".uid").val(data.uid);
                        layui.form.render();
                    },
                    cancel: function () {
                        window.location.reload();
                    },
                    end: function () {

                        window.location.reload();

                    }
                });

            });
        }



    });


</script>

<body>
<!--<div th:replace="menu/left :: leftbar" ></div>-->
<!--<div th:replace="menu/top :: topbar"></div>-->


<div class="table">
    <h2 class="tablename">角色对应权限表(可对角色详细权限进行操作)</h2>
    <hr class="layui-bg-green">
<table class="layui-hide" id="demo" lay-filter="test"></table>
</div>
<script type="text/html" id="barDemo">

   <a class="layui-btn layui-btn-xs" lay-event="edit" id="edit">编辑</a>
   <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>


</script>

<script>

    layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'], function(){
        var laydate = layui.laydate //日期
            ,laypage = layui.laypage //分页
            ,layer = layui.layer //弹层
            ,table = layui.table //表格
            ,carousel = layui.carousel //轮播
            ,upload = layui.upload //上传
            ,element = layui.element //元素操作
            ,slider = layui.slider //滑块

        //执行一个 table 实例
        table.render({
            elem: '#demo'
            ,height: 600
            ,url: 'allpermission' //数据接口
            ,title: '用户表'
            ,page: true //开启分页

            ,toolbar: 'true ' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档

            ,cols: [ [ //表头
                {type: 'checkbox', fixed: 'left'},
//                ,{field: 'rPId', title: 'ID', width:'8%', sort: true, fixed: 'left'}
//                ,{field: 'roleId', title: '角色id', width:'8%'}
//                ,{field: 'nationName', title: '权限id', width:'8%', sort: true},
                {field: 'role', title: '角色',width:'10%', sort: true,fixed: 'left'}
                ,{field: 'roleDescribe', title: '角色信息', width: '35%'}

                ,{field: 'permission', title: '权限', width: '15%', sort: true}
                ,{field: 'permissionDescribe', title: '权限信息', width:'15%'}
                ,{fixed: 'right', width: '20%', align:'center', toolbar: '#barDemo'}



            ] ]
        });
        //监听行工具事件
        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
             if(layEvent === 'del'){
                layer.confirm('是否确认删除该角色的权限?', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构
                    layer.close(index);
                    var rPId = obj.data.rPId;
                    console.log(rPId);
                    $.ajax({
                        type:"post",
                        url:'permission/delete/'+rPId
                    }
                        ,layer.msg("删除成功",{icon:'1',time:2000})
                    );
//                    window.location.reload();


                });
            } else if(layEvent === 'edit'){
                 var roleId = obj.data.roleId;
                 var url ="permission/toedit/"+roleId;

                 $(window).attr("location",url);


            }
        });




    });
</script>
</body>

</html>